<template>
    <p>Vuex</p>
    <p>count1:{{ this.$store.state.count }}</p>
    <p>count2:{{ count }}</p>
    <p>test:{{ test }}</p>
    <p>countAlias:{{ countAlias }}</p>
    <p>getters =================</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>countAddFiveAddTen:{{ countAddFiveAddTen }}</p>
    <p>countAddFiveAlias:{{ countAddFiveAlias }}</p>
    <p>Mutations========================</p>
    <button @click="addMut">addMut</button>
    <button @click="addPlayloadMut">addPlayload</button>
    <button @click="add">add</button>
    <button @click="addCommit">addCommit</button>
    <button @click="addAlias">addAlias</button>


    <p>actions==========================</p>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asynAddctionMut">asynAddctionMut</button>
    <button @click="asyncAddployloadActionMut">asyncAddployloadActionMut</button>
    <button @click="addAction">addAction</button>
    <button @click="addActionDisactch">addActionDisactch</button>
    <button @click="addActionAlias">addActionAlias</button>



    <p>模块=======================</p>
    <p>模块b中的state数据:{{ $store.state.b.countB }}</p>
    <p>模块中B的getters数据:{{ $store.getters['b/countBB']}}</p>
    <button @click="commitIncreaseB">触发-moduleB模块</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB模块-actions</button>

    <p>MaxXXXXX</p>
    <p>模块中B的方法</p>
    <p>countB:{{ countB }}</p>
    <p>mutations</p>
    <button @click="increaseB">increaseB</button>

</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
    computed:{
        // count(){
        //     return this.$store.state.count
        // }
        // ...mapState(['count','test'])
        ...mapState({
            count:'count',
            test:'test',
            countAlias:'count'
        }),
        // countAddFive(){
        //     return this.$store.getters.countAddFive
        // },
        // countAddFiveAddTen(){
        //     return this.$store.getters.countAddFiveAddTen
        // }
        // //数组写法
        // ...mapGetters(['countAddFive',"countAddFiveAddTen"])

        ...mapGetters({
            countAddFive:'countAddFive',
            countAddFiveAddTen:'countAddFiveAddTen',
            countAddFiveAlias:'countAddFive'
        }),


        ...mapState('b',['countB'])
    },
    methods:{
        addMut(){
            this.$store.commit('add')
        },
        addPlayloadMut(){
            this.$store.commit('addPlayload',{num:10})
        },
        ...mapMutations(['add','addPlayload']),
        addCommit(){
            this.addPlayload({num:20})
        },
        ...mapMutations({
            add:'add',
            addAlias:'add',
            addPlayload:'addPlayload'
        }),

        addActionMut(){
            this.$store.dispatch('addAction')
        },
        asynAddctionMut(){
            this.$store.dispatch('asynAddction')
        },
        asyncAddployloadActionMut(){
            this.$store.dispatch('asyncAddployloadAction',{num:20})
        },
        ...mapActions(['addAction','asyncAddployloadAction']),
        addActionDisactch(){
            this.asyncAddployloadAction({num:30})
        },
        ...mapActions({
            addAction:'addAction',
            addActionAlias:'addAction'
        }),
        // add(state){
        //     state.count++
        // },
        // addPlayload(state,playload){
        //     state.count +=playload.num
        // }
        // asyncAddployloadAction({commit},playload){
        //     setTimeout(()=>{
        //         commit('addPlayload',playload)
        //    },1000)
        // }
        // asynAddction({commit}){
        //     setTimeout(()=>{
        //          commit('add')
        //     },1000)
        // }

        commitIncreaseB(){
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB(){
            this.$store.dispatch('b/asynIncreaseB')
        },
        ...mapMutations('b',['increaseB'])
    },
    mounted(){
        console.log(this.$store);
    }
}
</script>